<template>
  <div>
    <search-form
      ref="searchForm"
      :search-config="searchConfig"
      :label-width="150"
      @clear="clearSearch"
      @search="handleSearch"
      @visible-change="handleVisibleChange"
    />
    <c-permission-tabs v-model="activeTab" code="tab" type="card">
      <el-tab-pane label="全部" name="all" lazy>
        <Table ref="all" :filters-raw="filtersRaw" :params-raw="paramsRaw" :tab-index="1" button-group-code="all" />
      </el-tab-pane>
      <el-tab-pane label="待跟进" name="tobe_followup" lazy>
        <Table ref="tobe_followup" :filters-raw="filtersRaw" :params-raw="paramsRaw" :tab-index="2" :fixed-filters-raw="toBeFollowedFiltersRaw" button-group-code="tobe_followup" />
      </el-tab-pane>
    </c-permission-tabs>
  </div>
</template>

<script>
import Table from './components/table'
import { parseTime } from '@/utils'
export default {
  name: 'MonthTask',
  components: {
    Table
  },
  props: {
  },
  data() {
    return {
      searchConfig: [
        { label: '市场编码', prop: 'marketCode', type: 'text', value: '', placeholder: '' },
        { label: '市场名称', prop: 'marketName', type: 'text', value: '', placeholder: '' },
        {
          type: 'select',
          prop: 'marketType',
          label: '市场类型',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/TOBE_MARKET_TYPE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          label: '所属办事处',
          prop: 'agencyCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: '/select-service/api/v1/organization/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            pageFlag: true
          }
        },
        { label: '门店升级任务号', prop: 'taskCode', type: 'text', value: '', placeholder: '' },
        { label: '门店编码', prop: 'shopCode', type: 'text', value: '', placeholder: '' },
        { label: '门店名称', prop: 'shopName', type: 'text', value: '', placeholder: '' },
        {
          type: 'select',
          prop: 'dataSource',
          label: '数据来源',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CTM_MARKET_DATA_FROM`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          label: '责任人',
          prop: 'responsibleCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: '/slm-ctm/api/v1/user/personOrg/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'personName',
              value: 'adAccount'
            },
            selectData: []
          },
          dialogConfig: {
            title: '责任人',
            interfacePath: '/slm-ctm/api/v1/user/personOrg/page',
            setting: [{ prop: 'adAccount', title: '编码' }, { prop: 'personName', title: '名称' }],
            filtersRaw: [
            ],
            pageFlag: true
          }
        },
        {
          type: 'select',
          prop: 'shopBuildStage',
          label: '门店建设进度',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/BEFORE_CONST_SCHEDULE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          type: 'date',
          prop: 'taskDate',
          label: '分配月份',
          dateType: 'monthrange',
          dateConfig: {
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          },
          value: '',
          placeholder: ''
        },
        {
          type: 'select',
          prop: 'taskType',
          label: '任务类型',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CTM_MARKET_TASK_TYPE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          type: 'radio',
          prop: 'enable',
          label: '启用状态',
          value: '1',
          placeholder: '',
          config: {
            remote: false,
            defaultProps: {
              label: 'label',
              value: 'value'
            },
            selectData: [
              { label: '全部', value: '' },
              { label: '启用', value: '1' },
              { label: '停用', value: '0' }
            ]
          }
        },
        {
          type: 'checkbox',
          prop: 'onlyCurrentMonth',
          label: '仅显示当月任务',
          value: '',
          placeholder: '',
          filter: false,
          config: {
            remote: false,
            selectData: [
              { value: '1', label: '是' }
            ]
          }
        }

      ],
      activeTab: 'all',
      filtersRaw: [{ id: 'enable', property: 'enable', value: '1', operator: '=' }],
      paramsRaw: {},
      toBeFollowedFiltersRaw: [
        { id: 'marketFollowUpStage', property: 'marketFollowUpStage', value: '[C,D]', operator: 'NOT IN' },
        { id: 'enable1', property: 'enable', value: '1', operator: '=' }
      ]
    }
  },
  computed: {
  },
  watch: {
    activeTab: {
      handler(v) {
        if (this.$refs[v]) {
          this.$nextTick(() => {
            this.refreshTableBoxData('onPage')
          })
        }
      }
    }
  },
  methods: {
    clearSearch() {
      this.filtersRaw = [{ id: 'enable', property: 'enable', value: '1', operator: '=' }]
      this.paramsRaw = {}
      this.$nextTick(() => {
        // 默认启用
        this.$refs.searchForm.updateValue('enable', '1')
      })
    },
    handleSearch({ filtersRaw, paramsRaw }) {
      const f = [...filtersRaw]
      const p = { ...paramsRaw }
      if (p.onlyCurrentMonth && [1, '1'].includes(p.onlyCurrentMonth[0])) {
        f.push({ id: 'taskDate', property: 'taskDate', value: parseTime(new Date(), '{y}-{m}'), operator: '=' })
        delete p.onlyCurrentMonth
      }
      this.filtersRaw = f
      this.paramsRaw = p
      this.refreshTableBoxData()
    },
    handleVisibleChange() {
      const activeTab = this.activeTab
      this.$nextTick(() => {
        this.$refs[activeTab] && this.$refs[activeTab].refreshTableHeight()
      })
    },
    refreshTableBoxData(flag) {
      const activeTab = this.activeTab
      this.$nextTick(() => {
        this.$refs[activeTab] && this.$refs[activeTab].refreshTableBoxData(flag)
      })
    }
  }
}
</script>
